<template>
	<drawer
		title="配置快速入口"
		:display.sync="isShow"
		width="35%"
		:withHeader="false"
		:isComponentUse="true"
		@visibleChange="visibleOrderChange"
	>
		<div v-loading="isShow && loading" style="height: 100%">
			<div class="entryTitle">配置快速入口</div>
			<el-col :lg="8" v-for="(item, index) in listData" :key="index">
				<!--            <el-popover-->
				<!--                    placement="bottom"-->
				<!--                    width="150"-->
				<!--                    trigger="click">-->
				<!--                        <el-radio-group v-model="item.radio" style="height: 200px;overflow-y: scroll">-->
				<!--                            <template v-for="(selectItem,key) in selectList">-->
				<!--                                <div>{{selectItem.menuName}}</div>-->
				<!--                                <template v-for="(selectChildItem,childKey) in selectItem.children">-->
				<!--                                    <el-radio :label="1"  class="radioList">{{selectChildItem.menuName}}</el-radio>-->
				<!--                                </template>-->

				<!--                            </template>-->

				<!--                        </el-radio-group>-->
				<div class="service_item">
					<div class="service_icon">
						<!--                                <img :src="item.src" alt="" v-if="item.src" width="36">-->
						<i :class="item.icon" class="iconfont" :style="{ fontSize: '36px', color: item.color }"></i>
					</div>
					<!--                            <div class="service_name">{{item.text}}</div>-->
					<div class="service_name">
						<!--                                <input style="width: 100%;border: 0;text-align: center"  v-model="item.text">-->
						<el-select class="entry_select" v-model="item.text" placeholder="暂未配置" filterable clearable>
							<el-option-group v-for="(group, key) in selectList" :key="key" :label="group.menuName">
								<el-option
									v-if="item.menuName != '一船一档'"
									v-for="(item, index) in group.children"
									:key="index"
									:label="item.menuName"
									:value="item.menuName"
								></el-option>
							</el-option-group>
						</el-select>
					</div>
				</div>
				<!--            </el-popover>-->
			</el-col>
			<div class="demo-drawer__footer" style="padding-bottom: 50px">
				<el-button type="primary" size="mini" @click="save" :loading="btnLoading">
					{{ btnLoading ? "提交中 ..." : "保 存" }}
				</el-button>
			</div>
		</div>
	</drawer>
</template>

<script>
import drawer from "@/components/BaseTable/drawer"

export default {
	name: "FastEntry",
	components: { drawer },
	props: {
		isShow: {
			type: Boolean,
			default: false,
		},
		data: {
			type: Array,
			default: [],
		},
	},
	created() {
		this.visibleOrderChange()
	},
	data() {
		return {
			loading: true,
			flag: true,
			btnLoading: false,
			filterData: [],
			selectList: [],
			listData: [
				{
					icon: "icon-tubiao-01",
					text: "",
					color: "#F75E5E",
				},
				{
					icon: "icon-tongyongtubiao1",
					text: "",
					color: "#5a59a6",
				},
				{
					icon: "icon-zongheguanli",
					text: "",
					color: "#edb01b",
				},
				{
					icon: "icon-tongyongtubiao2",
					text: "",
					color: "#45b6e4",
				},
				{
					icon: "icon-danzhengzhongxin",
					text: "",
					color: "#80DA22",
				},
				{
					icon: "icon-zuoye",
					text: "",
					color: "#F7B500",
				},
				{
					icon: "icon-kuchangguanli",
					text: "",
					color: "#F75E5E",
				},
				{
					icon: "icon-shangcaiyitihua",
					text: "",
					color: "#45b6e4",
				},
			],
		}
	},

	watch: {
		isShow(val) {
			if (val) {
				if (this.flag) {
					this.flag = false
					setTimeout(() => {
						this.getSelectList()
					}, 400)
				}
				this.listData = JSON.parse(JSON.stringify(this.data))
			}
		},
	},
	methods: {
		visibleOrderChange(val) {
			this.$emit("visibleChange", val)
		},
		save() {
			this.btnLoading = true
			let param = []
			this.listData.map((item, index) => {
				if (item.text) {
					// 新增校验，如果匹配不上 就传空  可能遇到老数据，菜单名字对应不上导致报错
					// menuName
					if (this.filterData.filter(v => v.menuName == item.text).length) {
						param.push({
							menuName: this.filterData.filter(v => v.menuName == item.text)[0].menuName,
							menuId: this.filterData.filter(v => v.menuName == item.text)[0].id,
							menuIndex: index,
							url: this.filterData.filter(v => v.menuName == item.text)[0].url,
						})
					}
				}
			})
			console.log("save", param)

			this.$http
				.post(`/${this.$ServiceName}/api/external/region/${this.$version}/insert`, param)
				.then(res => {
					if (res.data.success) {
						this.$message.success("保存成功")
						this.$emit("init")
					}
					this.btnLoading = false
				})
				.catch(error => {
					this.btnLoading = false
				})
		},
		getSelectList() {
			this.$http
				.get(`/${this.$ServiceName}/api/external/sysmenu/listmenubyacc`)
				.then(res => {
					this.selectList = res.data.data
					this.filterData = []
					this.selectList.map(item => {
						item.children.map(v => {
							if (v.menuName != "一船一档") {
								this.filterData.push(v)
							}
						})
					})
					this.loading = false

					console.log("this.selectList-->", this.selectList)
				})
				.catch(error => {
					this.loading = false
				})
		},
	},
}
</script>

<style scoped lang="less">
/deep/.el-loading-mask {
	z-index: 9000 !important;
}
/*/deep/ .mask-show{*/
/*    z-index: 8999!important;*/
/*}*/
.entryTitle {
	width: 100%;
	height: 40px;
	line-height: 40px;
	padding-left: 10px;
	text-align: left;
	border-bottom: 1px solid gainsboro;
}
.service_item:hover {
	box-shadow: 0 0 22px rgba(0, 0, 0, 0.2);
	border: 0;
	transition: all 0.5s;
}
.service_item {
	box-sizing: border-box;
	transition: all 0.5s;
	height: 107px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #fff;
	/*cursor: pointer;*/
	margin: 12px;
	border-radius: 12px;
	border: 1px darkgray dashed;

	/deep/ .el-card__body {
		padding: 0;
	}

	.service_icon {
		text-align: center;
		padding-top: 25px;
	}

	.service_name {
		text-align: center;
		font-size: 14px;
		color: #606266;
		letter-spacing: 0;
		text-align: center;
		padding: 17px 0;
	}
}
.radioList {
	width: 100%;
	padding: 0 0 10px 0;
	/*border-bottom: 1px darkgray solid;*/
}
.entry_select {
	/deep/ .el-input__inner {
		border: 0 !important;
	}
}
</style>
